<template>
    <div class="embroidery-preview" ref="warper">
        <div class="embroidery-canvas" :style="canvasStyle" />
    </div>
</template>
<script>
import { writeCanvas, writeSvg } from "@/utils/EmbroideryCanvas.js";

export default {
    props: {
        stitches: { type: Array, default: () => [] },
        colors: { type: Array, default: () => [] },
    },
    data () {
        return {
            svg: '',
            outer: { width: 0, height: 0 },
            inner: { width: 0, height: 0 },
            paddingBottom: 0,
        };
    },
    computed: {
        canvasStyle () {
            if (this.outer.height && this.inner.height) {
                // 在容器内显示最大，最大边填满容器
                var s = this.outer.height / this.outer.width || 1; // 宽高比例，高/宽
                var w = parseInt(this.inner.width) || 1;
                var h = parseInt(this.inner.height) || 1;

                if (h / w > s) {
                    return {
                        width: ((s * w) / h) * 100 + "%",
                        height: "100%",
                        left: (1 - (s * w) / h) * 50 + "%",
                    };
                } else {
                    return {
                        width: "100%",
                        height: (h / w / s) * 100 + "%",
                        top: (1 - h / w / s) * 50 + "%",
                    };
                }
            } else {
                return {}
            }

        }
    },
    watch: {
        'colors' () {
            this.getPreview()
        },
        'stitches' () {
            this.getPreview()
        }
    },

    methods: {
        getPreview () {
            if (this.stitches && this.stitches.length > 0) {
                // const box = writeSvg(this.stitches, this.colors)
                // this.svg = box.svg
                // this.paddingBottom = 100 * box.height / box.width + '%'
                const canvas = writeCanvas(this.stitches, this.colors, this.outer)
                this.inner.width = canvas.width;
                this.inner.height = canvas.height;
                this.$el.querySelector('.embroidery-canvas').innerHTML = ''
                this.$el.querySelector('.embroidery-canvas').appendChild(canvas)
            } else {
                this.svg = ''
            }

        },
        getSize () {
            if (this.$refs.warper) {
                const rect = this.$refs.warper.getBoundingClientRect()
                this.outer.width = rect.width;
                this.outer.height = rect.height;
            }
        }
    },
    mounted () {
        this.getSize()
        this.getPreview()
        window.addEventListener('resize', this.getSize)
    },
    beforeDestroy () {
        window.removeEventListener('resize', this.getSize)
    },
};
</script>
<style lang="scss" scoped>
.embroidery-preview {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;

    .embroidery-canvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        &::v-deep {
            svg,
            canvas {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
